.root {
  display: flex;
  min-height: 50vh;
  max-height: 80vh;
  overflow: hidden;
}

.list {
  flex-shrink: 0;
  border-right: 1px solid var(--vd-color-gray-200);
  overflow-x: hidden;
  overflow-y: auto;

  $padding-hoz: 8px;
  $padding-vert: 6px;

  .item {
    display: flex;
    align-items: center;
    width: 280px;
    padding: $padding-hoz $padding-vert;
    position: relative;
    cursor: pointer;

    &:hover,
    &.selected {
      background-color: var(--vd-color-gray-300);
    }

    .date {
      flex: 1;
      white-space: nowrap;
    }

    .extra {
      display: flex;
      align-items: center;
      gap: 2px;
    }

    .hash,
    .remote,
    .local,
    .note {
      line-height: 1;
      font-size: 12px;
      font-family: var(--vd-font-family-mono);
      border-radius: 4px;
      padding: 4px;
    }

    .hash {
      background-color: var(--vd-color-gray-300);
      color: var(--vd-color-gray-700);
    }

    .remote {
      background-color: var(--vd-color-danger-300);
      color: var(--vd-color-gray-200);
    }

    .local {
      background-color: var(--vd-color-info-200);
    }

    .note {
      background-color: var(--vd-color-warning-100);
    }
  }
}

.body {
  flex: 1;

  .content {
    padding: var(--vd-spacing-sm) var(--vd-spacing-base);

    .actions {
      display: flex;
      align-items: center;

      .actionLeft {
        flex: 1;
        display: flex;
        gap: var(--vd-spacing-xs);

        .versionSelect {
          width: 180px;
        }
      }

      .arrow {
        color: var(--vd-color-gray-500);
      }

      .actionRight {
        display: flex;
        justify-content: flex-end;
        gap: var(--vd-spacing-xs);
      }
    }
  }
}
